<template>
<span :class="circleSize === 'small' ? 'circle-style-small' : 'circle-style' " :style="styleObj">
  <div class="text"><span>{{firstWordByName}}</span></div>
</span>
</template>

<script>
import {accountColorList} from '../../../../api/customer/commom'

export default {
  name: 'CircleTag',
  props: {
    tagStyle: {
      type: Object,
      default: function () {
        return {}
      }
    },
    nameStr: {
      type: String,
      default: ''
    },
    circleSize: {
      type: String,
      default: 'normal'
    },
    circleColor: {
      type: String,
      default: 'deepBlue'
    }
  },
  data () {
    return {
      styleObj: this.tagStyle,
      colorList: accountColorList
    }
  },
  created () {
    this.styleObj['background-color'] = this.getColorValueByCode(this.circleColor)
  },
  methods: {
    getColorValueByCode (colorCode) {
      let colorItem = this.colorList.find(item => item.code === colorCode)
      if (colorItem) {
        return colorItem.value
      }
    }
  },
  computed: {
    firstWordByName () {
      if (this.nameStr && this.nameStr.length > 1) {
        return this.nameStr[0]
      } else {
        return ''
      }
    }

  },
  watch: {
    circleColor: function (newVal) {
      let colorItem = this.colorList.find(item => item.code === newVal)
      console.log('newVal', newVal)
      if (colorItem && newVal) {
        this.styleObj['background-color'] = this.getColorValueByCode(newVal)
      } else {
        this.styleObj['background-color'] = this.getColorValueByCode('deepBlue')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.circle-style{
  background-color: #6E92E9 ;
  display: inline-block;
  width: 18px;
  height: 18px;
  // line-height: 18px;
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 12px;
  .text{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    span{
      line-height: 12px;
    }
  }
}
.circle-style-small{
  background-color: #6E92E9 ;
  display: inline-block;
  width: 16px;
  height: 16px;
  // line-height: 16px;
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 12px;
  .text{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    span{
      line-height: 12px;
    }
  }
}
</style>
